<template>
  <div style="display: flex; flex-wrap: wrap">
    <div
      v-for="(file, index) in fileList"
      :key="index"
      style="width: 100px; margin: 0 15px 15px 0"
    >
      <div
        style="
          position: relative;
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba(0, 0, 0, 0.03);
          border-radius: 4px;
          overflow: hidden;
        "
        class="img-hover"
      >
        <img
          class="el-upload-list__item-thumbnail"
          :src="isImage(file) ? file.url : pic2"
          style="width: 100%; height: 100%; object-fit: cover"
          :style="!isImage(file) ? 'margin: auto;display: flex;' : ''"
          alt=""
        />
        <span
          class="modal"
          style="
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.3s;
          "
        >
          <span
            v-show="isImageOrPDF(file)"
            style="
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
            "
            class="text-[20px] c-white"
            @click="handlePictureCardPreview(file)"
          >
            <svg
              t="1723711211759"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="9848"
              width="20"
              height="20"
            >
              <path
                d="M870.3 936.4c-17.6 0-34.1-6.8-46.5-19.3L669.1 762.9c-20.8 14.4-43.1 26.7-66.6 36.7-45.7 19.4-94.2 29.2-144.2 29.2s-98.5-9.8-144.2-29.2c-44-18.5-83.6-45.2-117.7-79.3-33.9-33.9-60.6-73.5-79.3-117.8-19.4-45.7-29.2-94.2-29.2-144.3s9.8-98.6 29.2-144.3c18.7-44.2 45.4-83.8 79.4-117.8 34.1-34 73.7-60.7 117.7-79.3 45.6-19.4 94.1-29.2 144.1-29.2s98.5 9.8 144.2 29.2c44 18.5 83.6 45.2 117.7 79.4 33.9 33.9 60.6 73.5 79.3 117.8 19.4 45.7 29.2 94.2 29.2 144.3s-9.8 98.6-29.2 144.3c-10 23.8-22.5 46.4-37.1 67.4l154.4 154c25.7 25.7 25.7 67.4 0.1 93.1-12.5 12.5-29.1 19.3-46.6 19.3z m-3-62.9zM458.2 157.6c-40.6 0-79.9 7.9-116.8 23.6-35.7 15.1-67.9 36.8-95.6 64.4-27.5 27.5-49.2 59.7-64.4 95.5-15.7 37-23.6 76.4-23.6 117s7.9 80 23.6 117c15.2 35.9 36.9 68.1 64.4 95.6 27.7 27.7 59.8 49.3 95.4 64.4 37.1 15.7 76.4 23.6 117 23.6s79.9-7.9 116.9-23.6c27.1-11.5 52.2-26.8 74.7-45.5l21.3-17.7 17.9-21.4c18.9-22.6 34.4-48 45.9-75.4 15.7-37 23.6-76.4 23.6-117s-7.9-80-23.6-117c-15.2-35.9-36.9-68.1-64.4-95.6-27.7-27.7-59.8-49.3-95.4-64.4-37-15.6-76.3-23.5-116.9-23.5z"
                fill="#ffffff"
                p-id="9849"
              />
            </svg>
          </span>
          <span
            v-show="!isImageOrPDF(file)"
            style="
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
            "
            class="text-[20px] c-white"
            @click="handleDownload(file)"
          >
            <svg
              t="1723711287386"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11044"
              width="20"
              height="20"
            >
              <path
                d="M544.256 605.184l244.224-244.224a31.744 31.744 0 0 1 45.056 45.056l-295.424 295.424a36.864 36.864 0 0 1-51.2 0L190.464 406.528a31.744 31.744 0 1 1 45.056-45.056l244.224 244.224V111.104a32.256 32.256 0 1 1 64 0zM153.6 902.656a32.256 32.256 0 0 1 0-64h716.8a32.256 32.256 0 0 1 0 64z"
                fill="#ffffff"
                p-id="11045"
              />
            </svg>
          </span>
        </span>
      </div>
      <el-tooltip
        v-if="file.originalfilename?.length > 15"
        :content="file.originalfilename || ''"
        effect="customized"
      >
        <div class="alias oneLine file_name1">
          {{ file.originalfilename || "" }}
        </div>
      </el-tooltip>
      <div v-else class="alias oneLine file_name1">
        {{ file.originalfilename || "" }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import pic2 from "@/assets/images/document2.png";
import { ref } from "vue";

defineOptions({
  name: "CommonFileDetail",
  inheritAttrs: false,
});

const props = defineProps({
  // 回显的文件数据
  files: {
    type: Array,
    default: () => [],
  },
  // 一个页面中 多个文件上传组件
  keys: {
    type: Number,
    default: 1,
  },
  // 是否可编辑参数
  isRead: {
    type: Boolean,
    default: false,
  },
  // 多选
  multiple: {
    type: Boolean,
    default: true,
  },
  // 接受类型 .png,.jpeg,.jpg
  accept: {
    type: String,
    default: "",
  },
  // 是否显示提示文字
  showText: {
    type: Boolean,
    default: true,
  },
});

const { files } = toRefs(props);

const uploadApi = import.meta.env.VITE_APP_BASE_API;

// 预览url前缀
const upPreviewUrl = `${uploadApi}/system/fileCenter/preview/`;

// 上传统一文件夹名称
const folderName = ref("asset/mt/info");

const fileList = ref<any[]>([]);

// 图片链接处理
function handleImageUrl(list: any) {
  const newList = JSON.parse(JSON.stringify(list));
  newList.forEach((item: any) => {
    item.realUrl = item.url;
    item.url = `${upPreviewUrl}${item.realUrl}`;
  });
  return newList;
}

watch(
  () => files,
  (newFile) => {
    fileList.value = handleImageUrl(newFile.value);
  },
  {
    immediate: true,
  }
);

function isImage(file: any) {
  const imageTypes = [
    "image/jpeg",
    "image/png",
    "image/gif",
    "image/bmp",
    "image/webp",
    "jpeg",
    "jpg",
    "png",
    "gif",
    "bmp",
    "webp",
  ];
  return imageTypes.includes(file?.fileType);
}

function isImageOrPDF(file: any) {
  const imageTypes = [
    "image/jpeg",
    "image/png",
    "image/gif",
    "image/bmp",
    "image/webp",
    "jpeg",
    "jpg",
    "png",
    "gif",
    "bmp",
    "webp",
    "pdf",
  ];
  return imageTypes.includes(file?.fileType);
}

const handlePictureCardPreview = (file: any) => {
  if (isImageOrPDF(file)) {
    let url = file.url;
    url = url?.replace("fileCenter/download/", "fileCenter/preview/");
    window.open(url);
  }
};

const handleDownload = (file: any) => {
  let downloadElement = document.createElement("a");
  // 创建下载的链接
  downloadElement.href = file.url;
  // 下载后文件名
  downloadElement.download = file.name;
  document.body.appendChild(downloadElement);
  // 点击下载
  downloadElement.click();
  // 下载完成移除元素
  document.body.removeChild(downloadElement);
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.img-hover:hover {
  .modal {
    opacity: 1 !important;
  }
}
</style>
